<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>lyon'blog</title>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/cl-css.css' %}" rel="stylesheet">
    <link href="{% static 'font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'highlight/styles/railscasts.css' %}">
<!--    <script type="text/javascript" >-->
<!--        window.onload = function () {-->
<!--            var getEle = document.getElementsByTagName("img")-->
<!--            var getEle_divLeft = document.getElementById("div_left")-->
<!--            for (var i = 0; i < getEle.length; i++) {-->
<!--                getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px";-->
<!--            }-->
<!--        }-->

<!--    </script>-->


</head>

<body>
<div class="cl-header container-fluid">
    <div class="header-content container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="/">
                <img src="{% static 'img/SS.png' %}" width="144" height="72" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">首页 <span class="sr-only">(current)</span></a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">教程</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">模板</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">日记</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">关于</a>-->
<!--                    </li>-->
                </ul>
            </div>
        </nav>
    </div>
</div>


<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">
<!--            <div class="cl-artical-content" id="div_left">-->

            <div class="cl-artical-content">
                <h2 class="cl-artical-title">{{ blog.title }}</h2>
                <div class="cl-card-tag">
                    <div>
                        <span>{{ blog.read }}</span>
                        人浏览
<!--                        /<span>{{ blog.comment }}</span>-->
<!--                        人评论-->
                    </div>
                </div>
                {{ blog.content | safe }}
<!--                占坑-->
            </div>

<!-- 相关文章-->
<!--            <div class="recommend-panel">-->
<!--                <h4 class="right-card-title">相关文章</h4>-->
<!--                <div class="card-deck">-->
<!--                    <div class="card ll-panel">-->
<!--                        <a class="recommend-panel-link" href="calmlog-details.html">-->
<!--                            <div class="recommend-panel-top">-->
<!--                                <img src="{% static 'temporary-img/list-image1.jpg' %}" class="img-fluid" alt="">-->
<!--                            </div>-->
<!--                            <div class="recommend-panel-bottom">-->
<!--                                如何有效避免设计作品“空”？-->
<!--                            </div>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                    <div class="card ll-panel">-->
<!--                        <a class="recommend-panel-link" href="calmlog-details.html">-->
<!--                            <div class="recommend-panel-top">-->
<!--                                <img src="{% static 'temporary-img/list-image2.jpg' %}" class="img-fluid" alt="">-->
<!--                            </div>-->
<!--                            <div class="recommend-panel-bottom">-->
<!--                                高点击率钻展，设计环节…-->
<!--                            </div>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                    <div class="card ll-panel">-->
<!--                        <a class="recommend-panel-link" href="calmlog-details.html">-->
<!--                            <div class="recommend-panel-top">-->
<!--                                <img src="{% static 'temporary-img/list-image3.jpg' %}" class="img-fluid" alt="">-->
<!--                            </div>-->
<!--                            <div class="recommend-panel-bottom">-->
<!--                                无敌配色技巧（一）-->
<!--                            </div>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--评论模块-->

<!--            <div class="comment">-->


<!--                <form class="cl-comment-from">-->
<!--                    <div><textarea placeholder="说点什么吧..." rows="1"></textarea></div>-->
<!--                    <button type="button">留言</button>-->
<!--                    <span class="clearfix"></span>-->
<!--                </form>-->


<!--                <h4 class="right-card-title">全部评论</h4>-->
<!--                <div class="comment-panel">-->
<!--                    <div class="comment-panel-portrait">-->
<!--                        <img src="{% static 'img/portrait.png' %}" class="img-fluid rounded-circle" alt="">-->
<!--                    </div>-->
<!--                    <div class="comment-panel-content">-->
<!--                        <div class="comment-panel-content-item">-->
<!--                            <div class="comment-author">晴天下起了小雨</div>-->
<!--                            <div>2017-10-01 18:00</div>-->
<!--                        </div>-->
<!--                        <div class="comment-panel-content-main">很喜欢，果断关注了</div>-->
<!--                    </div>-->
<!--                    <span class="clearfix"></span>-->
<!--                    <div class="text-primary"><a href="">回复</a></div>-->
<!--                </div>-->

<!--                <div class="comment-panel">-->
<!--                    <div class="comment-panel-portrait">-->
<!--                        <img src="{% static 'img/portrait.png' %}" class="img-fluid rounded-circle" alt="">-->
<!--                    </div>-->
<!--                    <div class="comment-panel-content" >-->
<!--                        <div class="comment-panel-content-item">-->
<!--                            <div class="comment-author">wjmyly7336064</div>-->
<!--                            <div>2017-10-01 18:00</div>-->
<!--                        </div>-->
<!--                        <div class="comment-panel-content-main">相当实用，赞美了</div>-->
<!--                        &lt;!&ndash;comment-secondary-panel&ndash;&gt;-->
<!--                        <div class="comment-secondary-panel">-->
<!--                            <span class="triangle-icon"><i class="fa fa-sort-asc" aria-hidden="true"></i></span>-->
<!--                            <div class="comment-panel-content">-->
<!--                                <div class="comment-panel-content-item">-->
<!--                                    <div class="comment-author">橘大佬</div>-->
<!--                                    <div>2017-10-01 18:00</div>-->
<!--                                </div>-->
<!--                                <div class="comment-panel-content-main">就是有些细节再到位点就好了…</div>-->
<!--                            </div>-->
<!--                            <span class="clearfix"></span>-->
<!--                        </div>-->
<!--                        &lt;!&ndash;&ndash;&gt;-->
<!--                    </div>-->
<!--                    <span class="clearfix"></span>-->
<!--                    <div class="text-primary"><a href="">回复</a></div>-->
<!--                </div>-->

<!--            </div>-->

        </div>

        <div class="col-md-3 cl-right" >
            <div class="right-card">
                <div class="right-card-main">
                    <div class="right-card-title">qq群—在考虑建不建</div>
                    <div class="cl-code" >
<!--                        <img src="{% static 'temporary-img/code.jpg' %}" class="img-fluid" alt="">-->
                        <p>啦啦啦啦</p>
                    </div>

                </div>
            </div>

            <div class="right-card">
                <div class="right-card-main">
                    <div class="right-card-title">最新文章</div>
<!--                    <div class="right-recommended"><a href="#"><img src="{% static 'temporary-img/list-right.jpg' %}" class="img-fluid" alt=""></a></div>-->
                    <ul class="right-recommended-list">
                        {% for article in articles %}
                        <li><a href="details/{{ article.id }}"><i class="fa fa-angle-right" aria-hidden="true"></i>{{ article.title }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
<!--                <div class="right-card-main">-->
<!--                    <div class="right-card-title">最新文章</div>-->
<!--                    <div class="right-recommended"><a href="#"><img src="{% static 'temporary-img/list-right.jpg' %}" class="img-fluid" alt=""></a></div>-->
<!--                    <ul class="right-recommended-list">-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>如何有效避免设计作品“空”？</a></li>-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>“线框”在设计中有哪些妙用？</a></li>-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>设计修图，为什么如此实用？</a></li>-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>如何提升作品的整体设计感？</a></li>-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>应该从哪些点审查作品的不足？</a></li>-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>详情页设计，应该从哪里入手？</a></li>-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>配色中的色，从哪里来？</a></li>-->
<!--                        <li><a href="calmlog-details.html"><i class="fa fa-angle-right" aria-hidden="true"></i>设计画面太平，该怎么破？</a></li>-->

<!--                    </ul>-->
<!--                </div>-->
            </div>

            <div class="right-card">
<!--热门标签-->
<!--                <div class="right-card-main">-->
<!--                    <div class="right-card-title">热门标签</div>-->
<!--                    <ul class="label">-->
<!--                        <li><a href="#">JPress</a></li>-->
<!--                        <li><a href="#">平面设计</a></li>-->
<!--                        <li><a href="#">网页设计</a></li>-->
<!--                        <li><a href="#">皮肤</a></li>-->
<!--                        <li><a href="#">主题</a></li>-->
<!--                        <li><a href="#">模板</a></li>-->
<!--                        <li><a href="#">APP设计</a></li>-->
<!--                        <li><a href="#">企业网站</a></li>-->
<!--                        <li><a href="#">博客主题</a></li>-->
<!--                        <li><a href="#">设计规则</a></li>-->
<!--                        <li><a href="#">UI设计</a></li>-->
<!--                        <li><a href="#">界面设计</a></li>-->
<!--                        <li><a href="#">icon</a></li>-->
<!--                        <li><a href="#">UI</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
            </div>

        </div>
    </div>
</div>


<div class="container-fluid cl-footer">
    <div class="container">
        <p class="cl-copyright" href="http://beian.miit.gov.cn/" >渝ICP备20009882号-1</p>
        <p class="cl-copyright">暂时准备留作日记和blog</p>
    </div>
</div>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'highlight/highlight.pack.js' %}"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>